import React, { FC, useState } from 'react';
import {
  FormPanel,
  FormPanelType,
  InputType,
  type FormPanelObject,
  FormPanelStatus,
  FormPanelBtnDisplay,
  FormPanelBtnAlign,
  Utils,
} from 'lfun-bg-comp';
import { Breadcrumb, Tabs, Modal, message, Button, Cascader } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
import { useNavigate, useLocation, useParams } from 'react-router-dom';
import { KG_LEVEL, KG_ORDER_STATUS, SCHOOL_OPERATION_TYPE, SCHOOL_ORG_TYPE } from '@/constant/schoolOptions';
import { PageContainer } from '@/component/page-container';
import styles from './index.less';
import EditSchoolInfo from './editSchoolInfo';
import Logs from './logs';
import NameIcon from '@/view/component/nameIcon';
import { PlanningSchoolKeyInfo, getPlanningSchool, updatePlanningSchoolKeyInfo } from '@/service/unit/planning';
import utils, { buildPageItemTxtByEduType, getPagePath, getPathRoot } from '@/utils';
import useCountry from '@/hooks/useCountry';
import SelectListText from '@/component/select-list-text';
import { getPlanningSchoolCategoryOptions } from '@/service/options';
import Create from './create';
import AnchorTabs from '@/component/anchor-tabs';

// eslint-disable-next-line react/require-default-props
const Groups: FC<{ isEdit?: boolean; buttonList?: any[] }> = ({ isEdit = true, buttonList = [] }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const { id } = useParams();
  const country = useCountry();
  const [isExpand, setIsExpand] = useState(false);

  const [showModel, setShowModel] = React.useState(false);
  const [value, setValue] = React.useState<any>({});
  const [editValue, setEditValue] = React.useState({});
  const [schoolInfoValue, setSchoolInfoValue] = React.useState();
  const [showLogs, setShowLogs] = React.useState(false);
  const init = async () => {
    utils.showLoading();
    const res = await getPlanningSchool(id || location.state.id);
    if (res.success) {
      const resdata: any = utils.flattenObject(res.data);
      if (resdata['planning_school.founder_type']) {
        resdata['planning_school.founder_type'] = [
          resdata['planning_school.founder_type'],
          resdata['planning_school.founder_type_lv2'],
          resdata['planning_school.founder_type_lv2'],
        ];
      }
      // if (!resdata['planning_school_communication.related_license_upload']) {
      //   delete resdata['planning_school_communication.related_license_upload'];
      // }
      setValue(res.data.planning_school_keyinfo);
      setSchoolInfoValue(resdata);
    } else {
      message.error(res.message);
    }
    utils.hideLoaing(res.success);
  };

  React.useEffect(() => {
    init();
  }, []);

  const list_no_expand: FormPanelType[] = [
    {
      title: '',
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
      inputs: [
        {
          label: '',
          name: 'planning_school_name',
          key: 'planning_school_name',
          span: 24,
          inputType: InputType.children,
          props: {
            className: 'allow-edit',
          },
          children: (
            <NameIcon
              span={24}
              isEdit={isEdit}
              onClick={() => {
                const _editvalue: any = { ...value };
                // _editvalue.planning_school_operation_type = [
                //   _editvalue.planning_school_operation_type,
                //   _editvalue.planning_school_operation_type_lv2,
                //   _editvalue.planning_school_operation_type_lv3,
                // ];
                setEditValue(_editvalue);
                setShowModel(true);
              }}
            />
          ),
        },
        {
          label: buildPageItemTxtByEduType('机构编码'),
          name: 'planning_school_no',
          key: 'planning_school_no',
          span: 6,
          textRange: [0, 20],
        },
        {
          label: '行政归属地',
          name: 'borough',
          key: 'borough',
          inputType: InputType.children,
          children: <SelectListText />,
          span: 6,
        },
        // {
        //   label: '行政管辖区',
        //   name: 'borough',
        //   key: 'borough',
        //   span: Utils.getProps('edu_type') !== 'kg' ? 6 : 5,
        //   inputType: InputType.select,
        //   renderOption: country,
        // },
        // {
        //   label: '地域管辖区',
        //   name: 'block',
        //   key: 'block',
        //   span: Utils.getProps('edu_type') !== 'kg' ? 6 : 5,
        //   ruleType: 'default',
        //   inputType: InputType.select,
        //   renderOption: country,
        // },
        {
          label: '星级',
          name: 'planning_school_level',
          key: 'planning_school_level',
          span: 6,
          inputType: InputType.select,
          renderOption: KG_LEVEL,
          hidden: Utils.getProps('edu_type') !== 'kg',
        },
        // {
        //   label: '学校办别',
        //   name: 'planning_school_org_type',
        //   key: 'planning_school_org_type',
        //   span: Utils.getProps('edu_type') !== 'kg' ? 6 : 4,
        //   inputType: InputType.select,
        //   renderOption: SCHOOL_ORG_TYPE,
        // },
        {
          label: '状态',
          name: 'status',
          key: 'status',
          span: 6,
          inputType: InputType.select,
          renderOption: KG_ORDER_STATUS,
        },
      ],
    },
  ];
  const list_expand: FormPanelType[] = [
    {
      title: '',
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
      inputs: [
        ...list_no_expand[0].inputs,
        {
          label: '学校性质',
          name: 'planning_school_edu_level',
          key: 'planning_school_edu_level',
          inputType: InputType.select,
          renderOption: SCHOOL_OPERATION_TYPE,
          span: 6,
        },
        {
          label: '办学类型分组',
          name: 'planning_school_category',
          key: 'planning_school_category',
          inputType: InputType.select,
          renderOption: async (form: FormPanelObject) => {
            return getPlanningSchoolCategoryOptions(form, 'planning_school_edu_level');
          },
          span: 6,
        },
        {
          label: '办学类型',
          name: 'planning_school_operation_type',
          key: 'planning_school_operation_type',
          renderOption: SCHOOL_OPERATION_TYPE,
          inputType: InputType.cascader,
          children: <Cascader />,
          span: 6,
        },
        {
          label: '办别',
          name: 'planning_school_org_type',
          key: 'planning_school_org_type',
          span: Utils.getProps('edu_type') !== 'kg' ? 6 : 4,
          inputType: InputType.select,
          renderOption: SCHOOL_ORG_TYPE,
        },
        {
          label: '所在地址',
          name: 'a',
          key: 'a',
          inputType: InputType.children,
          children: <SelectListText />,
          span: 24,
          props: {
            labelCol: { span: 2 },
          },
        },
        {
          label: '详细地址',
          name: 'a1',
          key: 'a1',
          inputType: InputType.textarea,
          span: 24,
          props: {
            labelCol: { span: 2 },
          },
        },
      ],
    },
  ];

  const keyinfoEdit: FormPanelType[] = [
    {
      title: '',
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      span: 24,
      inputs: [
        {
          label: buildPageItemTxtByEduType('园所名称'),
          name: 'planning_school_name',
          key: 'planning_school_name',
          required: true,
          textRange: [0, 20],
        },
        {
          label: buildPageItemTxtByEduType('机构编码'),
          name: 'planning_school_no',
          key: 'planning_school_no',
          required: true,
          textRange: [0, 20],
          disabled: true,
        },
        {
          label: '行政管辖区',
          name: 'borough',
          key: 'borough',
          required: true,
          inputType: InputType.select,
          renderOption: country,
        },
        {
          label: '地域管辖区',
          name: 'block',
          key: 'key_19',
          required: true,
          inputType: InputType.select,
          renderOption: country,
        },
        // {
        //   label: '学校类型',
        //   name: 'planning_school_type',
        //   key: 'planning_school_type',
        //   required: true,
        //   inputType: InputType.select,
        //   disabled: true,
        //   renderOption: SCHOOL_TYPE,
        // },
        // {
        //   label: '办学类型',
        //   name: 'planning_school_operation_type',
        //   key: 'planning_school_operation_type',
        //   required: true,
        //   inputType: InputType.cascader,
        //   renderOption: SCHOOL_OPERATION_TYPE,
        // },
        {
          label: '星级',
          name: 'planning_school_level',
          key: 'planning_school_level',
          required: true,
          inputType: InputType.select,
          renderOption: KG_LEVEL,
          hidden: Utils.getProps('edu_type') !== 'kg',
        },
        {
          label: '学校办别',
          name: 'planning_school_org_type',
          key: 'planning_school_org_type',
          required: true,
          inputType: InputType.select,
          renderOption: SCHOOL_ORG_TYPE,
        },
      ],
    },
  ];
  const pagePath = getPagePath();
  return (
    <PageContainer
      header={
        <Breadcrumb
          items={[
            {
              title: (
                <div className={styles.back}>
                  <LeftOutlined />
                  {pagePath.power_name}
                </div>
              ),
              onClick: () => navigate(getPathRoot(pagePath.power_url)),
            },
          ]}
        />
      }
      // subHeader={
      //   <Breadcrumb
      //     items={[
      //       {
      //         title: <div className={styles.back}>{pagePath.power_name}</div>,
      //         onClick: () => navigate(getPathRoot(pagePath.power_url)),
      //       },
      //       {
      //         title: `${pagePath.power_name}详情`,
      //       },
      //     ]}
      //   />
      // }
    >
      <div className={styles.edit_container}>
        <FormPanel
          template={isExpand ? list_expand : list_no_expand}
          key={1}
          buttonsDisplay={FormPanelBtnDisplay.none}
          values={value}
          formStatus={FormPanelStatus.nonEdit}
        />
        <Button
          style={{
            position: 'absolute',
            top: '0',
            zIndex: '999',
            right: '0',
          }}
          type="primary"
          onClick={() => setShowLogs(true)}
        >
          变更日志
        </Button>
        <Button
          type="link"
          onClick={() => setIsExpand(!isExpand)}
          style={{ position: 'absolute', right: '20px', bottom: '34px', zIndex: 999 }}
        >
          {!isExpand ? '展开' : '收起'}
        </Button>
      </div>

      <Logs show={showLogs} onClose={() => setShowLogs(false)} title={value?.planning_school_name} />

      <AnchorTabs>
        <a href="#anchor1">园所基本信息</a>
        <a href="#anchor2">园所基本信息</a>
        <a href="#anchor3">园所教学信息</a>
        <a href="#anchor4">领导信息</a>
      </AnchorTabs>
      <EditSchoolInfo buttons={buttonList} value={schoolInfoValue} isEdit={isEdit} />
      {/* <Tabs
        className={styles.edit_tabs}
        type="card"
        items={[
          {
            label: buildPageItemTxtByEduType('园所基本信息'),
            key: '1',
            children: (
              <div className={`${styles.edit_baisc_info} ${isEdit ? 'submit-block' : 'submit-none'}`}>
                <EditSchoolInfo buttons={buttonList} value={schoolInfoValue} isEdit={isEdit} />
              </div>
            ),
          },
          // {
          //   label: '变更日志',
          //   key: '2',
          //   children: <Logs operation_target_type="planning_school" />,
          // },
        ]}
      /> */}
      <Create
        show={showModel}
        editType="edit"
        onCancel={() => setShowModel(false)}
        values={{}}
        onOk={() => {
          setShowModel(false);
          init();
        }}
      />
      {/* <Modal title="关键信息编辑" footer={[]} open={showModel} onCancel={() => setShowModel(false)}>
        <FormPanel
          template={keyinfoEdit}
          key={1}
          btnsAlign={FormPanelBtnAlign.center}
          buttonsDisplay={FormPanelBtnDisplay.block}
          restBtnText="返回"
          submitBtnText="确定"
          values={editValue}
          onFinish={async (formPanelObject: FormPanelObject) => {
            const values = formPanelObject.getFieldsValue();
            const keyInfo: PlanningSchoolKeyInfo = { id: location.state.id, ...values };
            // keyInfo.planning_school_operation_type_lv2 = keyInfo.planning_school_operation_type[1];
            // keyInfo.planning_school_operation_type_lv3 = keyInfo.planning_school_operation_type[2];
            // keyInfo.planning_school_operation_type = keyInfo.planning_school_operation_type[0];
            const res = await updatePlanningSchoolKeyInfo(keyInfo);
            if (res.success) {
              message.info('修改成功');
              formPanelObject.resetFields();
              setShowModel(false);
              // init();
            } else {
              formPanelObject.reVaildation(res);
            }
            return false;
          }}
          onReset={() => setShowModel(false)}
        />
      </Modal> */}
    </PageContainer>
  );
};

export default Groups;
